<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<title>订单</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Best Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<div th:include="css :: css"></div>
<!-- //animation-effect -->
</head>
	
<body>
<!-- header -->
<div th:include="/header :: header" ></div>
<!-- //header -->
<!-- breadcrumbs -->
	<div class="breadcrumbs">
		<div class="container">
			<ol class="breadcrumb breadcrumb1 animated wow slideInLeft" data-wow-delay=".5s">
				<li><a href="/index"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>主页</a></li>
				<li class="active">订单</li>
			</ol>
		</div>
	</div>
<!-- //breadcrumbs -->
<!-- login -->
	<div class="" id="app">
		<div class="container">
			<h2 class="typoh2 animated wow fadeInUp animated" data-wow-duration="1000ms" data-wow-delay="500ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 500ms; animation-name: fadeInUp;">我的订单</h2>
			<div class="bs-docs-example animated wow fadeInUp animated" data-wow-duration="1000ms" data-wow-delay="500ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 500ms; animation-name: fadeInUp;">
				<table class="table">
					<thead>
						<tr>
							<th>订单编号</th>
							<th>金额</th>
							<th>支付状态</th>
							<th>查看详情</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="item in orderlist">
							<td>{{item.id}}</td>
							<td>{{item.totalPrice}}</td>
							<td><i v-if="item.pay==false"> 未支付</i><i v-if="item.pay==true"> 已支付</i></td>
							<td><a href="#"><span class="label label-info" v-on:click="gotodetails(item.id)">去查看</span></a></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
<!-- //login -->
<!-- footer -->
<div th:include="footer::footer"></div>
<!-- //footer -->
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            orderlist:null
        },  methods: {
            gotodetails: function (id) {
                // `this` 在方法里指向当前 Vue 实例
                // alert('id: ' + id + '!');
                localStorage.orderid=id;
                window.location.href="/orderdetails"
            }
        }
    });

    init();
    function init(){
        $.ajax({
            url: '/order/find/all',
            type: 'GET',
        }).done(function (res) {
            console.log(res.obj)
            vm.orderlist = res.obj
            console.log("地址success");
        })
            .fail(function () {
                console.log("error");
            })
            .always(function () {
                console.log("complete");
            });
    }
</script>
</body>
</html>